import 'package:downloadsfolder/downloadsfolder.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:infinite_scroll_pagination/infinite_scroll_pagination.dart';
import 'package:pornhub_app/components/image_view.dart';
import 'package:pornhub_app/components/base_refresh/base_refresh_widget.dart';
import 'package:pornhub_app/components/no_more/no_data.dart';
import 'package:pornhub_app/utils/extension.dart';
import 'package:pornhub_app/views/mine/group_buying/group_members_controller.dart';

import '../../../assets/assets.dart';
import '../../../assets/styles.dart';
import '../../../model/mine/group_members_model.dart';
import '../../../routes/routes.dart';
import '../../../utils/color.dart';

class GroupBuyMembersPage extends GetView<GroupMembersController> {
  const GroupBuyMembersPage({super.key});

  @override
  Widget build(BuildContext context) {
    final bgColor = Styles.color.bgColor;

    return Scaffold(
      backgroundColor: bgColor,
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        shadowColor: Colors.transparent,
        iconTheme: const IconThemeData(color: Colors.white),
        title: Text("拼团购会员",
            textAlign: TextAlign.center,
            style: TextStyle(
              color: COLOR.hexColor('#ffffff'),
              fontSize: 16.sp,
              fontWeight: FontWeight.w600,
            )),
        centerTitle: true,
        actions: [
          Container(
            padding: EdgeInsets.all(15.w),
            child: Text(
              "拼团记录",
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.white60,
                fontSize: 14.w,
                fontWeight: FontWeight.w600,
              ),
            ),
          ).onOpaqueTap(() {
            Get.toNamed(Routes.groupbuymemberssuccesspage);
          }),
        ],
      ),
      body: _buildContent(),
    );
  }

  Widget _buildContent() {
    return BaseRefreshWidget(controller,
        child: PagedListView(
            padding: EdgeInsets.symmetric(vertical: 15.w),
            pagingController: controller.pagingController,
            builderDelegate: PagedChildBuilderDelegate<GroupMembersModel>(
                firstPageProgressIndicatorBuilder: (context) =>
                    const SizedBox.shrink(),
                newPageProgressIndicatorBuilder: (context) =>
                    const SizedBox.shrink(),
                noMoreItemsIndicatorBuilder: (context) =>
                    const SizedBox.shrink(),
                noItemsFoundIndicatorBuilder: (context) => const NoData(),
                itemBuilder: (context, item, index) => _buildImgText(item))));
  }

  Widget _buildImgText(GroupMembersModel model) {
    return Column(
      children: [
        Container(
          margin: EdgeInsets.symmetric(horizontal: 10.w),
          width: double.infinity,
          height: 130.w,
          child: Flex(
            direction: Axis.horizontal,
            children: [
              AspectRatio(
                aspectRatio: 107 / 130,
                child: ClipRRect(
                  borderRadius: const BorderRadius.all(Radius.circular(5)),
                  child: Stack(
                    alignment: Alignment.center,
                    children: [
                      ImageView(src: model.coverImg ?? ''),
                      Visibility(
                          visible: model.status == 1,
                          child: Container(
                            color: COLOR.hexColor('4DFFFFFF'),
                          )),
                      Visibility(
                          visible: model.status == 1,
                          child: Image.asset('assets/mine/img_buying_done.png',
                              width: 78.w, height: 78.w)),
                    ],
                  ),
                ),
              ),
              Padding(padding: EdgeInsets.only(left: 8.w)),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Flex(
                      direction: Axis.horizontal,
                      children: [
                        Container(
                          width: 45.w,
                          height: 21.w,
                          decoration: BoxDecoration(
                            color: COLOR.hexColor('#F52443'),
                            borderRadius: BorderRadius.circular(4),
                          ),
                          child: Align(
                            alignment: Alignment.center,
                            child: Text(
                              '${model.limitGroup}人团',
                              style: TextStyle(
                                  color: COLOR.hexColor('#ffffff'),
                                  fontSize: 12.w,
                                  fontWeight: FontWeight.w400),
                            ),
                          ),
                        ),
                        Expanded(child: Container()),
                        SizedBox(
                          height: 20.w,
                          width: 90.w,
                          child: ListView.builder(
                            shrinkWrap: true,
                            scrollDirection: Axis.horizontal,
                            itemCount: model.limitGroup,
                            itemBuilder: (context, indexs) {
                              List<Participants>? participants =
                                  model.participants ?? [];
                              return _buildUserHead(
                                  indexs < participants.length
                                      ? participants[indexs]
                                      : null,
                                  indexs);
                            },
                          ),
                        ),
                        Visibility(
                            visible: model.status == 1 ? false : true,
                            child: RichText(
                              text: TextSpan(children: [
                                TextSpan(
                                    text: '还差',
                                    style: TextStyle(
                                        fontSize: 14.w,
                                        color: COLOR.hexColor('#ffffff'),
                                        fontWeight: FontWeight.w500)),
                                TextSpan(
                                    text:
                                        '${model.limitGroup! - model.nowJoin!}人',
                                    style: TextStyle(
                                      fontSize: 16.w,
                                      color: COLOR.hexColor('#F52443'),
                                    )),
                                TextSpan(
                                    text: '成团',
                                    style: TextStyle(
                                      fontSize: 14.sp,
                                      color: COLOR.hexColor('#ffffff'),
                                      fontWeight: FontWeight.w500,
                                    )),
                              ]),
                            )),
                        Visibility(
                            visible: model.status == 1,
                            child: Text(
                              "已成团",
                              style: TextStyle(
                                color: COLOR.hexColor("#F52443"),
                                fontSize: 14.w,
                                fontWeight: FontWeight.w600,
                              ),
                            )),
                      ],
                    ),
                    Padding(padding: EdgeInsets.only(top: 15.w)),
                    Text(
                      "${model.info}",
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                        color: COLOR.hexColor("#ffffff"),
                        fontSize: 12.w,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                    Expanded(child: Container()),
                    Visibility(
                      visible: model.status == 0,
                      child: Flex(
                        direction: Axis.horizontal,
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Stack(
                            children: [
                              Container(
                                width: 102.w,
                                height: 55.w,
                                decoration: BoxDecoration(
                                  color: COLOR.hexColor('#FFE2E6'),
                                  borderRadius: BorderRadius.circular(6),
                                ),
                                child: Align(
                                  alignment: Alignment.center,
                                  child: Column(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: [
                                      RichText(
                                        text: TextSpan(children: [
                                          TextSpan(
                                              text: '拼团价',
                                              style: TextStyle(
                                                  fontSize: 11.w,
                                                  color:
                                                      COLOR.hexColor('#FF415D'),
                                                  fontWeight: FontWeight.w500)),
                                          TextSpan(
                                              text: '${model.groupPrice}',
                                              style: TextStyle(
                                                fontSize: 20.w,
                                                color:
                                                    COLOR.hexColor('#FF0026'),
                                              )),
                                        ]),
                                      ),
                                      RichText(
                                        text: TextSpan(children: [
                                          TextSpan(
                                              text: '原价',
                                              style: TextStyle(
                                                  fontSize: 11.w,
                                                  decoration: TextDecoration
                                                      .lineThrough,
                                                  color:
                                                      COLOR.hexColor('#FF415D'),
                                                  fontWeight: FontWeight.w500)),
                                          TextSpan(
                                              text: '${model.price}',
                                              style: TextStyle(
                                                fontSize: 11.w,
                                                decoration:
                                                    TextDecoration.lineThrough,
                                                color:
                                                    COLOR.hexColor('#FF415D'),
                                              )),
                                        ]),
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                              Container(
                                margin: EdgeInsets.only(left: 95.w),
                                width: 102.w,
                                height: 55.w,
                                decoration: BoxDecoration(
                                  color: COLOR.hexColor(model.buyGroupNot!
                                      ? '#8776FF'
                                      : '#F52443'),
                                  borderRadius: BorderRadius.circular(6),
                                ),
                                child: InkWell(
                                  onTap: () {
                                    controller.onSubmitGold(model);
                                  },
                                  child: Align(
                                    alignment: Alignment.center,
                                    child: Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      mainAxisAlignment:
                                          MainAxisAlignment.center,
                                      children: <Widget>[
                                        Text(
                                          model.buyGroupNot == true
                                              ? '等待拼单'
                                              : '参与拼单',
                                          style: TextStyle(
                                            color: COLOR.hexColor("#ffffff"),
                                            fontSize: 14.w,
                                            fontWeight: FontWeight.w600,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                    Visibility(
                      visible: model.status == 1,
                      child: Container(
                        width: 123.w,
                        height: 34.w,
                        decoration: BoxDecoration(
                          color: COLOR.hexColor('#F7F7F7'),
                          borderRadius: BorderRadius.circular(6),
                        ),
                        child: Align(
                          alignment: Alignment.center,
                          child: Text(
                            '已抢光，下次再来吧',
                            style: TextStyle(
                              color: COLOR.hexColor("#AFAFAF"),
                              fontSize: 11.w,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
        Container(
          margin: EdgeInsets.symmetric(vertical: 20.w),
          child: SizedBox(
            width: double.infinity,
            height: 4.w,
            child: Container(
              color: COLOR.hexColor("#181818"),
            ),
          ),
        )
      ],
    );
  }

  Widget _buildUserHead(Participants? participants, int index) {
    double offset = index * -8;
    return Transform.translate(
      offset: Offset(offset, 0), // X轴偏移
      child: Container(
        child: participants == null
            ? Image.asset(
                'assets/mine/img_group_member_normal.png',
                width: 21.w,
                height: 21.w,
              )
            : ImageView(
                src: participants == null ? '' : '${participants.logo}',
                width: 21.w,
                height: 21.w,
                defaultPlace: participants == null
                    ? 'assets/mine/img_group_member_normal.png'
                    : Assets.avatarplaceholer,
                fit: BoxFit.cover,
                borderRadius: BorderRadius.circular(20.w),
              ),
      ),
    );
  }
}
